import React, { useState ,useEffect} from 'react'
import { Editor } from "react-draft-wysiwyg"
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"

export default function NewsEditor(props) {
  /*--------------------------------------state-----------------------------------------------------------------*/
  /*--------------------------------------state-----------------------------------------------------------------*/
  /*--------------------------------------state-----------------------------------------------------------------*/
  /*--------------------------------------state-----------------------------------------------------------------*/
  const [editorState, setEditorState] = useState("")
  /*--------------------------------------hooks调用方法-----------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法-----------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法-----------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法-----------------------------------------------------------------*/
  useEffect(()=>{
    // html-===> draft, 
    const html = props.content
    if(html===undefined) return 
    const contentBlock = htmlToDraft(html);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
      setEditorState(editorState)
    }
},[props.content])
  /*-----------------------------------------------方法-----------------------------------------------------------------*/
  /*-----------------------------------------------方法-----------------------------------------------------------------*/
  /*-----------------------------------------------方法-----------------------------------------------------------------*/
  /*-----------------------------------------------方法-----------------------------------------------------------------*/
  // 失去焦点时候获取富文本内容
  const getEditorContent = () => {
    const get_content = draftToHtml(convertToRaw(editorState.getCurrentContent()))
    props.getContent(get_content)
  }
  /*--------------------------------------jsx-----------------------------------------------------------------*/
  /*--------------------------------------jsx-----------------------------------------------------------------*/
  /*--------------------------------------jsx-----------------------------------------------------------------*/
  /*--------------------------------------jsx-----------------------------------------------------------------*/
  return (
    <div>
      <Editor
        editorState={editorState}
        toolbarClassName="Editortoolbar"
        wrapperClassName="Editorwrapper"
        editorClassName="Editoreditor"
        onEditorStateChange={(editorState) => setEditorState(editorState)}
        onBlur={() => getEditorContent()}
      />
    </div>
  )
}
